<template>
  <div id="stationFreesDataTable">
    <div class="allElectronicBill" id="allElectronicBill" v-if="showModel.stationFreesDataTableShow">
      <Row>
        <i-col>
          <ButtonGroup style="float: right;margin-right: 20px;">
            <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='day'?'buttonGroupActive':''" @click.native="changeStartTime('day')">日</Button>
            <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='month'?'buttonGroupActive':''" @click.native="changeStartTime('month')">月</Button>
            <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='year'?'buttonGroupActive':''" @click.native="changeStartTime('year')">年</Button>
          </ButtonGroup>
        </i-col>
      </Row>
      <div class="showHideBtn" @click="showHideTable('hide')">
        <i class="hideIcon"></i>
      </div>
      <div class="allElectronicBillBackground">
        <div class="quadrilateral borderLeft">
          <div style="width: 100%" class="borderTop"></div>
        </div>
        <div class="diamond"></div>
        <div class="frameBorder"></div>
        <div style="position:absolute;right:0;top:0;height: 100%;z-index: 400;" class="borderRight"></div>
        <div style="position:absolute;right:0;bottom:0;width: 520px;z-index: 400;" class="borderBottom"></div>
      </div>
      <div class="allElectronicBillDetail">
        <table cellspacing="0" cellpadding="0" class="stationFreesDataTable" v-if="isLoad">
          <tr style="background-image: none;">
            <td class="center tableTitleFontStyle title11" rowspan="2">货运中心</td>
            <td class="center tableTitleFontStyle title12" rowspan="2">公铁转运总量(单)</td>
            <td class="center tableTitleFontStyle title13" colspan="2">整车(万吨）</td>
            <td class="center tableTitleFontStyle title14" colspan="4">集装箱(万吨）</td>
          </tr>
          <tr style="background-image: none;">
            <td class="center title21">发送量</td>
            <td class="center title21">到达量</td>
            <td class="center title21">发送箱数</td>
            <td class="center title21">发送量</td>
            <td class="center title21">到达箱数</td>
            <td class="center title22">到达量</td>
          </tr>
          <template v-for="(item,i) in stationFreesDataTableList">
            <tr v-if="item.freeName==='全疆'">
              <td class="content11 tableTitleFontStyle">
                <i :style="stationColorAllContent['全疆']"></i>
                {{item.freeName}}
              </td>
              <td class="content12 content1FontStyle center">{{((+item.zyzl)/10000)>=100?(+item.zyzlt/10000).toFixed(floatNum)+'万':+item.zyzl}}</td>
              <td class="content13 content1FontStyle center">{{((+item.zcSendNum)/10000)>0?((+item.zcSendNum)/10000).toFixed(floatNum):0}}</td>
              <td class="content13 content1FontStyle center">{{((+item.zcArriveNum)/10000)>0?((+item.zcArriveNum)/10000).toFixed(floatNum):0}}</td>
              <td class="content13 content1FontStyle center">{{((+item.xcSendCount)/10000)>=100?(+item.xcSendCount/10000).toFixed(floatNum)+'万':+item.xcSendCount}}</td>
              <td class="content13 content1FontStyle center">{{((+item.zcSendNum)/10000)>0?((+item.zcSendNum)/10000).toFixed(floatNum):0}}</td>
              <td class="content13 content1FontStyle center">{{((+item.xcArriveCount)/10000)>=100?(+item.xcArriveCount/10000).toFixed(floatNum)+'万':+item.xcArriveCount}}</td>
              <td class="content14 content1FontStyle center">{{((+item.xcArriveNum)/10000)>0?((+item.xcArriveNum)/10000).toFixed(floatNum):0}}</td>
            </tr>
            <tr v-if="item.freeName!=='全疆'">
              <td class="content11 content2FontStyle">
                <i :style="stationColorAllContent[item.freeName]"></i>
                {{item.freeName}}
              </td>
              <td class="content12 content2FontStyle center">{{((+item.zyzl)/10000)>=100?(+item.zyzlt/10000).toFixed(floatNum)+'万':+item.zyzl}}</td>
              <td class="content12 content2FontStyle center">{{((+item.zcSendNum)/10000)>0?((+item.zcSendNum)/10000).toFixed(floatNum):0}}</td>
              <td class="content13 content2FontStyle center">{{((+item.zcArriveNum)/10000)>0?((+item.zcArriveNum)/10000).toFixed(floatNum):0}}</td>
              <td class="content13 content2FontStyle center">{{((+item.xcSendCount)/10000)>=100?(+item.xcSendCount/10000).toFixed(floatNum)+'万':+item.xcSendCount}}</td>
              <td class="content13 content2FontStyle center">{{((+item.zcSendNum)/10000)>0?((+item.zcSendNum)/10000).toFixed(floatNum):0}}</td>
              <td class="content13 content2FontStyle center">{{((+item.xcArriveCount)/10000)>=100?(+item.xcArriveCount/10000).toFixed(floatNum)+'万':+item.xcArriveCount}}</td>
              <td class="content14 content2FontStyle center">{{((+item.xcArriveNum)/10000)>0?((+item.xcArriveNum)/10000).toFixed(floatNum):0}}</td>
            </tr>
          </template>
        </table>
      </div>
    </div>
    <div class="showTableBtn" v-if="showModel.stationFreesDataTableShowBtn" @click="showHideTable('show')">
      <div class="showTableBtnIcon">
        <i class="showIcon"></i>
      </div>
      <div class="showTableBtnTitle">展开数据</div>
    </div>
  </div>
</template>

<script>
  import {freightCenterDataLight} from '@api/lightStation/station'
  import moment from 'moment'
  import _ from 'lodash'

  export default {
    name: 'stationFreesDataTable',
    data () {
      let floatNum = 2
      let stationColorAllContent = {
        '乌鲁木齐货运中心': 'background-color:#44C0FF',
        '哈密货运中心': 'background-color:#FB943A',
        '喀什货运中心': 'background-color:#DD2037',
        '奎屯货运中心': 'background-color:#24C4A0',
        '库尔勒货运中心': 'background-color:#A1BF50',
        '全疆': 'background-color:transparent',
        '霍尔果斯站': 'background-color:#A889F9',
        '阿拉山口站': 'background-color:#F3E886'
      }
      let showModel = {
        stationFreesDataTableShow: true,
        stationFreesDataTableShowBtn: false
      }
      let qjData = {}
      let feightCountListSelect = 'day'
      let endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59'
      let dayStartTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let monthStartTime = moment().subtract(1, 'days').month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00'
      let yearStartTime = moment().subtract(1, 'days').year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00'
      let stationFreesDataTableList = []
      let dataListDay = {}
      let dataListMonth = {}
      let dataListYear = {}
      let tableParam = {
        startTime: dayStartTime,
        endTime: endTime
      }
      let isLoad = false
      let datas = {
        floatNum, isLoad, dataListDay, dataListMonth, dataListYear, stationColorAllContent, qjData, showModel, feightCountListSelect, endTime, dayStartTime, monthStartTime, yearStartTime, tableParam, stationFreesDataTableList
      }
      return datas
    },
    props: {},
    computed: {},
    methods: {
      showHideTable (type) {
        if (type === 'hide') {
          this.showModel = {
            stationFreesDataTableShow: false,
            stationFreesDataTableShowBtn: true
          }
        } else if (type === 'show') {
          this.showModel = {
            stationFreesDataTableShow: true,
            stationFreesDataTableShowBtn: false
          }
        }
      },
      changeStartTime (startTime) {
        this.feightCountListSelect = startTime
        if (startTime === 'day') {
          if (this.dataListDay) {
            this.stationFreesDataTableList = this.dataListDay
          } else {
            this.loadstationFreesDataTableData()
          }
        } else if (startTime === 'month') {
          if (this.dataListMonth) {
            this.stationFreesDataTableList = this.dataListMonth
          } else {
            this.loadstationFreesDataTableData()
          }
        } else if (startTime === 'year') {
          if (this.dataListYear) {
            this.stationFreesDataTableList = this.dataListYear
          } else {
            this.loadstationFreesDataTableData()
          }
        }
      },
      getTableDataDay () {
        let paramDay = {startTime: this.dayStartTime, endTime: this.endTime}
        let dataListDay = {}
        freightCenterDataLight(paramDay).then(res => {
          if (res.data.isSuccess === 1) {
            let qjData = {
              zyzl: 0,
              xcSendNum: 0,
              xcArriveNum: 0,
              xcArriveCount: 0,
              zcSendNum: 0,
              xcSendCount: 0,
              zcArriveNum: 0
            }
            _.forEach(res.data.data, (item, key) => {
              let zyzl = +item.xcArriveCount + item.xcSendCount
              res.data.data[key].zyzl = +zyzl
              res.data.data[key].freeName = key
              qjData.zyzl += +zyzl
              qjData.xcSendNum += +item.xcSendNum
              qjData.xcArriveNum += +item.xcArriveNum
              qjData.xcArriveCount += +item.xcArriveCount
              qjData.zcSendNum += +item.zcSendNum
              qjData.xcSendCount += +item.xcSendCount
              qjData.zcArriveNum += +item.zcArriveNum
              qjData.freeName = '全疆'
            })
            res.data.data['全疆'] = qjData
            dataListDay = res.data.data
            let obj = {
              'dataListDay': dataListDay,
              'time': moment().format()
            }
            obj = JSON.stringify(obj)
            localStorage.setItem('stationFreesDataTableDataListDay', obj)
            this.dataListDay = dataListDay
            this.changeStartTime('day')
            this.stationFreesDataTableList = this.dataListDay
            this.isLoad = true
          }
        })
      },
      getTableDataMonth () {
        let paramMonth = {startTime: this.monthStartTime, endTime: this.endTime}
        let dataListMonth = {}
        freightCenterDataLight(paramMonth).then(res => {
          if (res.data.isSuccess === 1) {
            let qjData = {
              zyzl: 0,
              xcSendNum: 0,
              xcArriveNum: 0,
              xcArriveCount: 0,
              zcSendNum: 0,
              xcSendCount: 0,
              zcArriveNum: 0
            }
            _.forEach(res.data.data, (item, key) => {
              let zyzl = +item.xcArriveCount + item.xcSendCount
              res.data.data[key].zyzl = +zyzl
              res.data.data[key].freeName = key
              qjData.zyzl += +zyzl
              qjData.xcSendNum += +item.xcSendNum
              qjData.xcArriveNum += +item.xcArriveNum
              qjData.xcArriveCount += +item.xcArriveCount
              qjData.zcSendNum += +item.zcSendNum
              qjData.xcSendCount += +item.xcSendCount
              qjData.zcArriveNum += +item.zcArriveNum
              qjData.freeName = '全疆'
            })
            res.data.data['全疆'] = qjData
            dataListMonth = res.data.data
            let obj = {
              'dataListMonth': dataListMonth,
              'time': moment().format()
            }
            obj = JSON.stringify(obj)
            localStorage.setItem('stationFreesDataTableDataListMonth', obj)
            this.dataListMonth = dataListMonth
          }
        })
      },
      getTableDataYear () {
        let paramYear = {startTime: this.yearStartTime, endTime: this.endTime}
        let dataListYear = {}
        freightCenterDataLight(paramYear).then(res => {
          if (res.data.isSuccess === 1) {
            let qjData = {
              zyzl: 0,
              xcSendNum: 0,
              xcArriveNum: 0,
              xcArriveCount: 0,
              zcSendNum: 0,
              xcSendCount: 0,
              zcArriveNum: 0
            }
            _.forEach(res.data.data, (item, key) => {
              let zyzl = +item.xcArriveCount + item.xcSendCount
              res.data.data[key].zyzl = +zyzl
              res.data.data[key].freeName = key
              qjData.zyzl += +zyzl
              qjData.xcSendNum += +item.xcSendNum
              qjData.xcArriveNum += +item.xcArriveNum
              qjData.xcArriveCount += +item.xcArriveCount
              qjData.zcSendNum += +item.zcSendNum
              qjData.xcSendCount += +item.xcSendCount
              qjData.zcArriveNum += +item.zcArriveNum
              qjData.freeName = '全疆'
            })
            res.data.data['全疆'] = qjData
            dataListYear = res.data.data
            let obj = {
              'dataListYear': dataListYear,
              'time': moment().format()
            }
            obj = JSON.stringify(obj)
            localStorage.setItem('stationFreesDataTableDataListYear', obj)
            this.dataListYear = dataListYear
          }
        })
      },
      loadstationFreesDataTableData () {
        let hasStationFreesDataTableDay = localStorage.hasOwnProperty('stationFreesDataTableDataListDay')
        let hasStationFreesDataTableMonth = localStorage.hasOwnProperty('stationFreesDataTableDataListMonth')
        let hasStationFreesDataTableYear = localStorage.hasOwnProperty('stationFreesDataTableDataListYear')
        if (hasStationFreesDataTableDay) {
          let obj = JSON.parse(localStorage.getItem('stationFreesDataTableDataListDay'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('stationFreesDataTableDataListDay')
            this.getTableDataDay()
          } else {
            this.dataListDay = obj.dataListDay
            this.changeStartTime('day')
            this.stationFreesDataTableList = this.dataListDay
            this.isLoad = true
          }
        } else {
          this.getTableDataDay()
        }
        if (hasStationFreesDataTableMonth) {
          let obj = JSON.parse(localStorage.getItem('stationFreesDataTableDataListMonth'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('stationFreesDataTableDataListMonth')
            this.getTableDataMonth()
          } else {
            this.dataListMonth = obj.dataListMonth
          }
        } else {
          this.getTableDataMonth()
        }
        if (hasStationFreesDataTableYear) {
          let obj = JSON.parse(localStorage.getItem('stationFreesDataTableDataListYear'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('stationFreesDataTableDataListYear')
            this.getTableDataYear()
          } else {
            this.dataListYear = obj.dataListYear
          }
        } else {
          this.getTableDataYear()
        }
      }
    },
    mounted () {
      this.loadstationFreesDataTableData()
    },
    watch: {},
    components: {}
  }
</script>

<style>
  #stationFreesDataTable .allElectronicBill {
    position: absolute;
    top: 200px;
    right: 30px;
    z-index: 200;
    width: 560px;
    height: 320px;
  }

  #stationFreesDataTable .allElectronicBill .allElectronicBillBackground {
    width: 540px;
    height: 290px;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 300;
  }

  #stationFreesDataTable .allElectronicBill .allElectronicBillBackground .quadrilateral {
    width: 540px;
    height: 270px;
    background: #205078;
  }

  #stationFreesDataTable .allElectronicBill .allElectronicBillBackground .diamond {
    border-top: 20px solid #205078;
    border-left: 20px solid transparent;
    height: 0;
    width: 540px;
  }

  #stationFreesDataTable .allElectronicBill .allElectronicBillBackground .frameBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 350;
    width: 30px;
    height: 30px;
    background: url("../../../../../static/img/img_zdangle.png") no-repeat;
    background-size: cover;
  }

  /*边框*/
  #stationFreesDataTable .borderTop {
    border-top-width: 1px;
    border-top-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  #stationFreesDataTable .borderLeft {
    border-left-width: 1px;
    border-left-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  #stationFreesDataTable .borderRight {
    border-right-width: 1px;
    border-right-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  #stationFreesDataTable .borderBottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  #stationFreesDataTable #allElectronicBill .ivu-btn-primary {
    color: #66B7F2;
    background-color: #225D92;
    border: 2px solid #225D92;
  }

  #stationFreesDataTable #allElectronicBill .buttonGroupActive {
    background-color: #173A58;
    border: 2px solid #225D92;
  }

  #stationFreesDataTable #allElectronicBill .showHideBtn {
    width: 15px;
    height: 60px;
    position: absolute;
    top: 50%;
    right: 5px;
    background: #347DBC;
    margin-top: -16px;
    line-height: 60px;
    color: #66B7F2;
    cursor: pointer;
  }

  #stationFreesDataTable #allElectronicBill .hideIcon {
    display: block;
    margin: 24px auto;
    width: 6px;
    height: 12px;
    background: url("../../../../../static/img/lt.png") no-repeat;
    background-size: cover;
  }

  #stationFreesDataTable #allElectronicBill .allElectronicBillDetail {
    position: absolute;
    margin: 10px;
    width: 520px;
    height: 270px;
    top: 30px;
    left: 0;
    z-index: 450;
  }

  #stationFreesDataTable #allElectronicBill .stationFreesDataTable {
    font-size: 12px;
    color: #E0F1FE;
  }

  #stationFreesDataTable #allElectronicBill .stationFreesDataTable td {
    overflow: hidden;
  }

  #stationFreesDataTable #allElectronicBill .title11 {
    width: 133px;
    height: 53px;
    border-right: 1px solid #3F7B9D;
    border-bottom: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .title12 {
    width: 73px;
    height: 53px;
    border-right: 1px solid #3F7B9D;
    border-bottom: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .title13 {
    width: 103px;
    height: 26px;
    border-right: 1px solid #3F7B9D;
    border-bottom: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .title14 {
    width: 208px;
    height: 26px;
    border-bottom: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .title21 {
    width: 51px;
    height: 26px;
    font-size: 12px;
    color: #A7D9FC;
    border-right: 1px solid #3F7B9D;
    border-bottom: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .title22 {
    width: 51px;
    height: 26px;
    font-size: 12px;
    color: #A7D9FC;
    border-bottom: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .content11 {
    width: 133px;
    height: 27px;
    border-right: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .content12 {
    width: 73px;
    height: 27px;
    border-right: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .content13 {
    width: 51px;
    height: 27px;
    border-right: 1px solid #3F7B9D;
  }

  #stationFreesDataTable #allElectronicBill .content14 {
    width: 52px;
    height: 27px;
  }

  #stationFreesDataTable #allElectronicBill td i {
    display: block;
    width: 7px;
    height: 7px;
    background-color: transparent;
    float: left;
    margin: 7px 5px;
    border-radius: 50%;
  }

  #stationFreesDataTable #allElectronicBill .content1FontStyle {
    font-size: 12px;
    color: #85CAFE;
  }

  #stationFreesDataTable #allElectronicBill .content2FontStyle {
    font-size: 12px;
    color: #fff;
  }

  #stationFreesDataTable #allElectronicBill .lineStyle {
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  #stationFreesDataTable #allElectronicBill tr:nth-child(even) {
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  #stationFreesDataTable #allElectronicBill tr:nth-child(odd) {
  }

  #stationFreesDataTable #allElectronicBill .stationFreesDataTable .center {
    text-align: center;
  }

  #stationFreesDataTable #allElectronicBill .tableTitleFontStyle {
    font-size: 14px;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(226, 251, 255, 1)), to(rgba(107, 194, 255, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #stationFreesDataTable .showTableBtn {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -89px;
    width: 30px;
    height: 80px;
    background: #347DBC;
    padding: 5px;
  }

  #stationFreesDataTable .showTableBtnIcon {
    float: left;
    width: 10px;
    height: 70px;
  }

  #stationFreesDataTable .showTableBtnIcon .showIcon {
    display: block;
    margin: 29px 0;
    width: 6px;
    height: 12px;
    background: url("../../../../../static/img/rt.png") no-repeat;
    background-size: cover;
  }

  #stationFreesDataTable .showTableBtnTitle {
    margin-top: 2px;
    float: left;
    width: 10px;
    height: 60px;
    font-size: 12px;
    color: #97D3FF;
  }
</style>
